<template>
  <div class="email">
    <div class="appPc" v-if="$store.state.screenWidth > 1300">
      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Email Alerts</h1>
      </div>

      <div class="please interval">
        <div class="block">
          <div class="title">
            Please fill out the form below to receive company press releases via
            email when they occur.
          </div>
          <div class="parallel">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="parallel-input"
            >
              <el-form-item label="" prop="firstName" class="list">
                <el-input v-model="ruleForm.firstName"></el-input>
              </el-form-item>
              <el-form-item label="" prop="lastName" class="list">
                <el-input v-model="ruleForm.lastName"></el-input>
              </el-form-item>
              <el-form-item label="" prop="email" class="list">
                <el-input v-model="ruleForm.email"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>

      <div class="choose interval">
        <div class="second-title">Choose Notifications</div>
        <div class="second-text">Sec Filings</div>
        <div class="second-checkout">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >All SEC Filings</el-checkbox
          >
          <div style="margin: 20px 0"></div>
          <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
          >
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{
              city
            }}</el-checkbox>
          </el-checkbox-group>
        </div>

        <div class="second-text">Company Information</div>
        <div class="second-checkout">
          <el-checkbox v-model="releasesChekcout"
            >All Press Releases</el-checkbox
          >
        </div>
      </div>

      <div class="three interval" @click="SubscribeStop">
        <div class="button">Subscribe</div>
      </div>
    </div>

    <div class="appH5" v-else>
      <div class="popup-lint"></div>

      <div class="backdrop">
        <img
          src="https://ir3.anbio.xyz/uploads/image/6528681748657426.jpg"
          alt=""
        />
        <h1 class="title">Email Alerts</h1>
      </div>

      <div class="h5-block">
        <div class="first">
          <div class="first-title">
            Please fill out the form below to receive company press releases via
            email when they occur.
          </div>

          <div class="first-display">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              class="demo-ruleForm"
            >
              <el-form-item prop="firstname">
                <el-input
                  v-model="ruleForm.firstname"
                  placeholder="firstname"
                ></el-input>
              </el-form-item>
              <el-form-item prop="lastname">
                <el-input
                  v-model="ruleForm.lastname"
                  placeholder="lastname"
                ></el-input>
              </el-form-item>

              <el-form-item prop="email">
                <el-input
                  v-model="ruleForm.email"
                  placeholder="email"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <div class="second">
          <div class="second-title">Choose Notifications</div>
          <div class="second-text">Sec Filings</div>
          <div class="second-checkout">
            <el-checkbox
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >All SEC Filings</el-checkbox
            >
            <div style="margin: 10px 0 0"></div>
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox v-for="city in cities" :label="city" :key="city">{{
                city
              }}</el-checkbox>
            </el-checkbox-group>
          </div>

          <div class="second-text">Company Information</div>
          <div class="second-checkout">
            <el-checkbox v-model="releasesChekcout"
              >All Press Releases</el-checkbox
            >
          </div>
        </div>

        <div class="three">
          <div class="button" @click="SubscribeStop">Subscribe</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { contactPost } from "../../api";

export default {
  data() {
    return {
      ruleForm: {
        firstName: "",
        lastName: "",
        email: "",
      },

      rules: {
        firstName: [
          {
            required: true,
            message: "Field should not be empty",
            trigger: "blur",
          },
        ],
        lastName: [
          {
            required: true,
            message: "Field should not be empty",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "Field should not be empty",
            trigger: "blur",
          },
        ],
      },

      //--
      checkAll: false,
      checkedCities: [],
      cityOptions: [],
      cities: [
        "Annual Report Filings",
        "Quarterly Report Filings",
        "Current Events",
        "Proxy Statements",
        "Section 16 Filings - End of day",
      ],
      isIndeterminate: true,
      releasesChekcout: false,
    };
  },
  created() {
    this.scrollTotap();
  },
  methods: {
    scrollTotap() {
      window.scrollTo(0, 0);
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.cities : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    //------------
    SubscribeStop() {
      let str = "";

      if (this.releasesChekcout == false) {
        this.$message({
          type: "error",
          message: "reCAPTCHA script error!",
          offset: 100,
        });
        return;
      }

      str = "All Press Releases";

      let params = {
        company: str,
        firstName: this.ruleForm.firstName,
        lastNane: this.ruleForm.lastName,
        email: this.ruleForm.email,
        phone: "",
        messag: "",
      };

      contactPost(params).then((res) => {
        if (res.errorCode == null) {
          this.$message({
            type: "success",
            message: "提交成功！",
            offset: 100,
          });

          this.$nextTick(() => {
            this.ruleForm.firstName = "";
            this.ruleForm.lastName = "";
            this.ruleForm.email = "";
            this.releasesChekcout = false;
            this.checkAll = false;
            this.checkedCities = [];
            this.cityOptions = [];
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.email {
  .appPc {
    .backdrop {
      height: 205px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 48px;
        font-weight: bold;
      }
    }

    .please {
      padding: 30px 0;
      box-sizing: border-box;

      .block {
        padding: 80px 80px 10px;
        background: #f6faff;
        border-radius: 5px;

        .title {
          font-size: 20px;
          font-weight: 500;
        }

        .parallel {
          margin-top: 20px;

          .parallel-input {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 100%;
            .list {
              width: calc((100% / 2) - 20px);
              margin-bottom: 80px;
              height: 70px;

              /deep/ .el-input__inner {
                height: 70px;
                line-height: 70px;
              }
            }

            /deep/ .el-form-item__error {
              font-size: 20px;
            }
          }
        }
      }
    }

    .choose {
      padding-top: 50px;

      .second-title {
        padding: 10px 0;
        font-size: 30px;
        font-weight: bold;
      }

      .second-text {
        font-size: 28px;
        font-weight: 500;
        margin-top: 40px;
        line-height: 1.4;
        color: #2c3341;
      }

      .second-checkout {
        margin-top: 40px;

        /deep/ .el-checkbox-group {
          width: 100px;
          padding-left: 30px;
          box-sizing: border-box;
        }

        /deep/ .el-checkbox__inner::after {
          width: 7px;
          height: 15px;
          left: 10px;
          top: 4px;
        }

        /deep/
          .el-checkbox__input.is-indeterminate
          .el-checkbox__inner::before {
          top: 15px;
        }

        /deep/ .el-checkbox {
          margin-bottom: 10px;
          font-weight: 500;
          color: #000;
        }
        /deep/ .el-checkbox__inner {
          width: 30px;
          height: 30px;
        }

        /deep/ .el-checkbox__label {
          font-size: 18px;
          font-weight: 300;
          letter-spacing: 0.5px;
          color: rgba(0, 0, 0, 0.7);
        }
      }
    }

    .three {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-bottom: 50px;

      .button {
        padding: 15px 30px;
        box-sizing: border-box;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        background: #276cd3;
        border-radius: 30px;
        cursor: pointer;
      }
    }
  }

  .appH5 {
    background: #eef4fc;

    .backdrop {
      height: 200px;
      width: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
      }

      .title {
        letter-spacing: 1.5px;
        color: #fff;
        position: relative;
        font-size: 24px;
        font-weight: bold;
      }
    }

    .h5-block {
      padding: 50px 10px;

      .first {
        padding: 25px 35px 10px;
        box-sizing: border-box;

        background-color: #f6faff;

        .first-title {
          font-size: 18px;
          padding-bottom: 20px;
        }
      }

      .second {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        padding-top: 50px;

        .second-title {
          padding: 10px 0;
          font-size: 19px;
          font-weight: bold;
        }

        .second-text {
          font-size: 18px;
          font-weight: 600;
          margin-top: 20px;
          line-height: 1.4;
          color: #000;
        }

        .second-checkout {
          margin-top: 20px;

          /deep/ .el-checkbox-group {
            width: 100px;
            padding-left: 30px;
            box-sizing: border-box;
          }

          /deep/ .el-checkbox {
            margin-bottom: 10px;
            font-size: 20px;
            color: #000;
          }

          /deep/ .el-checkbox__label {
            font-size: 16px;
            text-align: justify;
          }
        }
      }

      .three {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .button {
          padding: 10px 33px;
          box-sizing: border-box;
          color: #fff;
          font-size: 19px;
          background: #276cd3;
          border-radius: 30px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>